<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :sm="24" :md="12">
              <a-form-item label="创建时间">
                <a-range-picker
                  :allowClear="true"
                  :defaultValue="createdAtRange"
                  ref="createdAtRangePicker"
                  :disabled-date="disabledDate"
                  @change="createdAtRangePickerOnChange"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-button type="primary" @click="search">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-row :gutter="24">
        <a-col :sm="24" :md="12" :xl="12">
          <chart-card-custom :loading="loading" title="订单量" :total="orderStatisticsTotal">
            <order-area :daily-statistics="dailyStatistics"/>
          </chart-card-custom>
        </a-col>
        <a-col :sm="24" :md="12" :xl="12">
          <chart-card-custom :loading="loading" title="销售额" :total="performanceSummaryTotal | formatAmount">
            <performance-summary-area :daily-statistics="dailyStatistics"/>
          </chart-card-custom>
        </a-col>
        <a-col :sm="24" :md="12" :xl="12">
          <chart-card-custom :loading="loading" title="活跃会员数" :total="uvStatisticsTotal">
            <uv-area :daily-statistics="dailyStatistics"/>
          </chart-card-custom>
        </a-col>
        <a-col :sm="24" :md="12" :xl="12">
          <chart-card-custom :loading="loading" title="下单会员数" :total="placeOrderStatisticsTotal">
            <place-order-area :daily-statistics="dailyStatistics"/>
          </chart-card-custom>
        </a-col>
        <a-col :sm="24" :md="12" :xl="12">
          <chart-card-custom :loading="loading" title="总会员数/注册会员数">
            <number-of-agent-area :daily-statistics="dailyStatistics"/>
          </chart-card-custom>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import { ChartCard } from '@/components'
import { mixinDevice } from '@/utils/mixin'
import { dailyStatistics } from '@/api'
import OrderArea from '@/views/index/components/OrderArea'
import PerformanceSummaryArea from '@/views/index/components/PerformanceSummaryArea'
import UvArea from '@/views/index/components/UvArea'
import PlaceOrderArea from '@/views/index/components/PlaceOrderArea'
import NumberOfAgentArea from '@/views/index/components/NumberOfAgentArea'
import ChartCardCustom from '@/components/Charts/ChartCardCustom'
import moment from 'moment'

export default {
  mixins: [mixinDevice],
  components: {
    ChartCardCustom,
    NumberOfAgentArea,
    PlaceOrderArea,
    UvArea,
    PerformanceSummaryArea,
    OrderArea,
    ChartCard
  },
  data () {
    return {
      loading: true,
      dailyStatistics: [],
      createdAtRange: [
        // 2021-02-07 统计上线日,之前没数据的,所以最小那天
        moment().subtract(8, 'd').isBefore(moment('2021-02-07')) ? moment('2021-02-07') : moment().subtract(8, 'd'),
        moment().subtract(1, 'd')
      ],
      params: {
        // 因为 T+1 统计, 所以显示昨日的
        begin: (moment().subtract(8, 'd').isBefore(moment('2021-02-07')) ? moment('2021-02-07') : moment().subtract(8, 'd')).format('YYYY-MM-DD'),
        end: moment().subtract(1, 'd').format('YYYY-MM-DD')
      }
    }
  },
  created () {
    this.getDailyStatistics()
  },
  computed: {
    orderStatisticsTotal: function () {
      return this.dailyStatistics.reduce((total, item) => {
        total += (item.number_of_group_owner_order || 0) + (item.number_of_elite_order || 0) + (item.number_of_strongman_order || 0)
        return total
      }, 0)
    },
    performanceSummaryTotal: function () {
      return this.dailyStatistics.reduce((total, item) => {
        total += (item.group_owner_performance_summary || 0) + (item.elite_performance_summary || 0) + (item.strongman_performance_summary || 0)
        return total
      }, 0)
    },
    uvStatisticsTotal: function () {
      return this.dailyStatistics.reduce((total, item) => {
        total += (item.group_owner_uv || 0) + (item.elite_uv || 0) + (item.strongman_uv || 0)
        return total
      }, 0)
    },
    placeOrderStatisticsTotal: function () {
      return this.dailyStatistics.reduce((total, item) => {
        total += (item.number_of_group_owner__place_order || 0) + (item.number_of_elite_place_order || 0) + (item.number_of_strongman__place_order || 0)
        return total
      }, 0)
    }
  },
  methods: {
    getDailyStatistics () {
      dailyStatistics(this.params)
        .then(res => {
          this.loading = false
          this.dailyStatistics = res
        })
    },
    createdAtRangePickerOnChange (date, dateString) {
      this.params.begin = dateString[0]
      this.params.end = dateString[1]
    },
    search () {
      this.loading = true
      this.getDailyStatistics()
    },
    disabledDate (current) {
      return current && current < moment('2021-02-07')
    }
  }
}
</script>

<style lang="less" scoped>
.antv-chart-mini {
  position: relative;
  width: 100%;

  .chart-wrapper {
    position: absolute;
    bottom: -28px;
    width: 100%;

    /*    margin: 0 -5px;
        overflow: hidden;*/
  }
}
</style>
